<template>
  <div style="width: 100%; height: 100%">
    <div v-if="transferObj.typeList.length">
      <div class="s-b-center row-flex" >
        <template v-if="transferObj.all">
          <span class="bold-blue omit" @click.capture="openDia(transferObj.all)">{{ transferObj.all.num }}</span>
          <span @click.capture="openDia(transferObj.all)"> 总数 {{(parentName=='assets_storage_medium' || parentName=='assets_other_equipment') ?'(个)':(parentName=='assets_sec_product' || parentName=='assets_software_system')?'（套）':'（台）'}}</span>
          <p>
            <span>环比(月) </span>
            <i
              class="el-icon-caret-top"
              style="color: #ff3535"
              v-if="transferObj.all.rate.indexOf('-') == -1"
            ></i>
            <i class="el-icon-caret-bottom" style="color: #00b62c" v-else></i>
            {{ transferObj.all.rate }}
          </p>
        </template>
        <template v-else>
          <span class="bold-blue" @click.capture="openDia(transferObj)">{{ transferObj.sumRate }}%</span>
        </template>
      </div>
      <div class="round">
        <div class="s-b-round">
          <div
            class="s-b-r-line"
            v-for="(i, idx) in transferObj.typeList.slice(0, 8)"
            :style="lineStyle(idx)"
          >
            <img src="../../assets/images/asimgs/line.png" alt="" />
          </div>
        </div>
        <div
          class="s-b-content"
          v-for="(i, idx) in transferObj.typeList.slice(0, 8)"
          @click.capture="openDia(i)"
          :style="boxStyle(idx)"
        >
          <div class="s-b-c-head row-flex">
            <span class="bold-blue omit"
              >{{ i.num || 0 }}
              <span
                style="
                  font-size: 1.125rem;
                  margin-left: 0.375rem;
                  color: rgba(255, 255, 255, 0.8);
                "
                >{{(parentName=='assets_storage_medium' || parentName=='assets_other_equipment') ?'(个)':(parentName=='assets_sec_product' || parentName=='assets_software_system')?'（套）':'（台）'}}</span
              >
            </span>
            <span>{{ i.name }}</span>
          </div>
          <div class="s-b-c-bottom omit">
            <template v-if="transferObj.all">
              <span>环比(月) </span>
              <i
                class="el-icon-caret-top"
                style="color: #ff3535"
                v-if="i.rate.indexOf('-') == -1"
              ></i>
              <i
                class="el-icon-caret-bottom"
                style="color: ##00b62c"
                v-else
              ></i>
              {{ i.rate }}
            </template>
            <template v-else>
              <span>国产化替代率 </span>
              <!-- <i
                class="el-icon-caret-top"
                style="color: #ff3535"
                v-if="i.rate.indexOf('-') == -1"
              ></i> -->
              <!-- <i class="el-icon-caret-bottom" style="color: ##00b62c" v-else></i> -->
              {{ i.rate }} %
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="empty-box" v-else>暂无数据</div>
  </div>
</template>

<script>
export default {
  props: {
    transferObj: {
      type: Object,
      default: () => {},
    },
    parentName:{
      type:String,
      default: () => '',
    }
  },
  methods: {
    lineStyle(idx) {
      let length = Math.min(this.transferObj.typeList.length, 8);
      if (!this.transferObj.typeList) return;
      let deg = 360 / length;
      let x = Math.sin((idx * -deg * Math.PI) / 180) * 10.5;
      let y = Math.cos((idx * -deg * Math.PI) / 180) * 10.5;
      let transX = "-50%";
      let transY = "-50%";

      return {
        top: x + "rem",
        left: y + "rem",
        transform: `translate(${transX},${transY}) rotate(-${deg * idx}deg) `,
      };
    },
    boxStyle(idx) {
      let length = Math.min(this.transferObj.typeList.length, 8);
      if (!this.transferObj.typeList) return;
      let deg = 360 / length;
      let x = Math.sin((idx * -deg * Math.PI) / 180) * 17.5;
      let y = Math.cos((idx * -deg * Math.PI) / 180) * 17.5;
      let transX = "-50%";
      let transY = "-50%";

      return {
        top: x + "rem",
        left: y + "rem",
        transform: `translate(${transX},${transY}) `,
      };
    },
    openDia(i) {
      this.$emit("openDia", i);
    },
  },
  mounted() {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.s-bottom {
  position: relative;
  width: 100%;
  height: 100%;
  .s-b-center {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    width: 17.5rem;
    height: 17.5rem;
    background: url("../../assets/images/asimgs/zcej001@2x.png") no-repeat
      center;
    background-size: 100%;

    & > span {
      width: 100%;
      text-align: center;
      font-size: 1.5rem;
    }
    .bold-blue {
      font-size: 3.375rem;
      margin-bottom: 0.3125rem;
    }
    p {
      margin-top: 5px;
      padding: 5px 1.25rem;

      border-radius: 4px;
    }
  }
  .round {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.0625rem;
    height: 0.0625rem;
    transform: translate(-50%, -50%);
    position: absolute;
  }
  .s-b-round {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .s-b-r-line {
      position: absolute;
      img {
        max-width: 4.375rem;
        max-height: 4.375rem;
      }
    }
  }
  .s-b-content {
    position: absolute;
    width: 11.25rem;
    cursor: pointer;
    // top: 0%;
    // right: -18rem;
    // transform: translateY(-50%);
    .s-b-c-head {
      height: 6rem;
      width: 100%;
      padding: 0 0.1875rem;
      background: url(../../assets/images/asimgs/tk.png) no-repeat center;
      background-size: 100% 100%;
      .bold-blue {
        font-size: 2rem;
        margin-bottom: 0.3125rem;
      }
    }
    .s-b-c-bottom {
      width: 100%;
      background-image: linear-gradient(
        180deg,
        #002c41 0%,
        rgba(0, 30, 54, 0.5) 24%,
        rgba(0, 10, 37, 0) 50%,
        rgba(0, 23, 48, 0.5) 79%,
        #002139 100%
      );
      border: 0.51px solid rgba(35, 255, 249, 0.62);
      box-shadow: inset 0px 0px 4px 0px rgba(0, 224, 219, 1);
      padding: 0.625rem;
      margin-top: -1px;
    }
  }
}
.empty-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
